<template>
    <div>
        <el-switch
                v-model="value"
                active-color="#13ce66"
                inactive-color="#ff4949">
        </el-switch>
        <el-carousel
                height="200px"
                direction="vertical"
                interval="2000"
                indicator-position="none"
                :autoplay="true">
            <el-carousel-item v-for="item in 3" :key="item">
                <h3 class="medium">{{ item }}</h3>
            </el-carousel-item>
        </el-carousel>
        <vue-seamless-scroll :data="listData" >
            <ul >
                <li v-for="item in listData">
                    <span  v-text="item.title"></span><span  v-text="item.date"></span>
                </li>
            </ul>
        </vue-seamless-scroll>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                value: true,
                listData: [{
                    'title': '无缝滚动第一行无缝滚动第一行',
                    'date': '2017-12-16'
                }, {
                    'title': '无缝滚动第二行无缝滚动第二行',
                    'date': '2017-12-16'
                }, {
                    'title': '无缝滚动第三行无缝滚动第三行',
                    'date': '2017-12-16'
                }, {
                    'title': '无缝滚动第四行无缝滚动第四行',
                    'date': '2017-12-16'
                }, {
                    'title': '无缝滚动第五行无缝滚动第五行',
                    'date': '2017-12-16'
                }, {
                    'title': '无缝滚动第六行无缝滚动第六行',
                    'date': '2017-12-16'
                }, {
                    'title': '无缝滚动第七行无缝滚动第七行',
                    'date': '2017-12-16'
                }, {
                    'title': '无缝滚动第八行无缝滚动第八行',
                    'date': '2017-12-16'
                }, {
                    'title': '无缝滚动第九行无缝滚动第九行',
                    'date': '2017-12-16'
                }]
            }
        },
        watch: {
            value: {
                immediate: true,
                handler(val,oldval){
                    console.log(this.value)
                }
            }
        }
    };
</script>

<style scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    .seamless-warp {
        height: 229px;
        overflow: hidden;
    }
</style>
